<template>
  <div class="bookContent">
    <div class="content">
      <!-- 功能模块 -->
      <div class="head" v-show="isFun">
        <div class="back">
          <router-link :to="`/bookDetails/${$route.query.id}`">
            <img src="../assets/xy.png" alt="" />
          </router-link>
        </div>
      </div>
      <!-- 加入书架 -->
      <div class="addBook" v-show="isFun" @click="btnYuduMulu">加入书架</div>
      <!-- 下方的功能 -->
      <div class="btnBot" v-show="isFun">
        <div class="btnList">
          <div class="item">
            <div class="img" @click="showMulu">
              <img src="../assets/bom1.png" alt="" />
            </div>
            <div class="text">目录</div>
          </div>
          <div class="item" @click="btnplan">
            <div class="img">
              <img src="../assets/bom02.png" alt="" />
            </div>
            <div class="text">进度</div>
          </div>
          <div class="item" @click="btnTheme">
            <div class="img">
              <img src="../assets/Aa02.png" alt="" />
            </div>
            <div class="text">设置</div>
          </div>
          <div class="item" @click="btnNight">
            <div class="img">
              <img :src="imgSrc" alt="" />
            </div>
            <div class="text">{{ switchImg ? "白天" : "夜间" }}</div>
          </div>
        </div>
      </div>

      <!-- 上下章 -->
      <div v-show="isFun">
        <div class="plan" v-show="isQH">
          <div class="switchover">
            <div class="qian" @click="btnFor">
              <img src="../assets/hou.png" alt="" />
              <span>上一章</span>
            </div>
            <div class="middle">
              <span>{{ Content.title }}</span>
            </div>
            <div class="hou" @click="btnAft">
              <span>下一章</span>
              <img src="../assets/qian.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <!-- 主题样式功能 -->
      <div v-show="isFun">
        <div class="theme" v-show="isTheme">
          <div class="size">
            <div class="minus">A-</div>
            <div class="inp">
              <input
                type="range"
                class="range"
                value="50"
                @change="inpchange"
                :style="{ backgroundSize: inputValue + '%' }"
              />
            </div>
            <div class="add">A+</div>
          </div>
          <div class="themeItem">
            <ul>
              <li
                v-for="(item, index) in 4"
                :key="index"
                @click="selTheme(index)"
              ></li>
            </ul>
            <img
              :style="{ left: ColorLeft + 'vw' }"
              src="../assets/dagou2.png"
              alt=""
            />
          </div>
          <div class="direction">
            <div class="TB">上下滑动</div>
            <div class="LR">左右滑动</div>
          </div>
        </div>
      </div>

      <Loading v-show="!Content"></Loading>
      <!-- 内容 -->
      <div
        class="common"
        :style="{ background: contentBG }"
        @click="showFun"
        v-show="Content"
      >
        <div class="wenzi">
          <div
            class="top"
            :style="{
              fontSize: topSize + 'px',
              color: contentTopColor,
            }"
          >
            {{ Content.title }}
          </div>
          <div class="bookCon">
            <div
              class="title"
              :style="{
                fontSize: titleSize + 'px',
                color: contentMldColor,
              }"
            >
              {{ Content.title }}
            </div>
            <div class="text">
              <p
                v-for="(item, index) in NewcpContent"
                :key="index"
                :style="{ fontSize: fSize + 'px', color: contentMldColor }"
              >
                {{ item }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 目录列表 -->
    <div class="catalogueMulu" v-show="isMulu">
      <div class="cateleft" @click="mohu"></div>
      <div class="cateright">
        <div class="Title">
          <div class="titleName">目录</div>
          <div class="numOrder">
            <span class="num">共{{ sectionList.length }}章</span>
            <span class="order">倒序</span>
          </div>
          <div class="juan">
            <span>正文卷</span>
          </div>
        </div>
        <div class="section">
          <ul>
            <li
              v-for="(item, index) in sectionList"
              :key="index"
              :class="index == showIndex ? 'red' : ''"
              @click="btnList(index, item.link)"
            >
              <span>{{ item.title }}</span
              ><span></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="loadingCss" v-show="isLoading">
      <div id="preloader_6">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>
<script>
import Loading from "../components/Loading";
export default {
  components: {
    Loading,
  },
  data() {
    return {
      sectionList: [],
      isFun: false,
      isMulu: false,
      showIndex: 0,
      Content: {},
      isQH: false,
      isLoading: false,
      id: "",
      isAdd: false,
      bookTitle: "",
      NewcpContent: "",
      inputValue: 50,
      fSize: 16,
      topSize: 12,
      titleSize: 22,
      ColorLeft: 9,
      contentBG: "rgb(195, 177, 149)",
      isTheme: false,
      imgSrc: require("../assets/bom03.png"),
      switchImg: true,
      contentTopColor: "rgb(118, 108, 89)",
      contentMldColor: "rgb(29, 26, 22)",
      ColorIndex: 0,
    };
  },
  created() {
    // 一定要注意那个接口获取数据顺序的问题

    // 判断存储
    let racklist = localStorage.getItem("RackList");
    if (racklist) {
      let arr = JSON.parse(racklist);
      // 判断存储内有没有这本书
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == this.$route.query.id) {
          console.log("有这本书了");
          this.showIndex = arr[i].listIndex;
          console.log(this.showIndex);
        } else {
          console.log("没有这本书");
        }
      }
    }

    //获取列表
    this.$axios.get(`/book-info/${this.$route.query.id}`).then((d) => {
      console.log(d);

      // 书籍源
      this.$axios
        .get(`/book-sources?view=summary&book=${d.data._id}`)
        .then((d) => {
          console.log(d);
          // 章节列表
          this.$axios.get(`/book-chapters/${d.data[0]._id}`).then((d) => {
            this.sectionList = d.data.chapters;

            this.btnYuduMulu();
            this.showLoading();
            this.$axios
              .get(
                "/chapters/" +
                  encodeURIComponent(this.sectionList[this.showIndex].link)
              )
              // "http://vip.zhuishushenqi.com/chapter/56ceb83e608d1f990a4cdebe?cv=1620023137987"
              .then((d) => {
                console.log(d);
                this.Content = d.data.chapter;
                this.NewcpContent = d.data.chapter.cpContent.split("\r\n");
                this.showLoading();
              });
          });
        });
    });

    console.log(this.$route.query.text);
    console.log(this.$route.query.index);
    // console.log(this.$route.query.dataList);
    console.log(this.$route.query.id);
    console.log(this.$route.query.title);
    console.log(this.$route.query.cover);
    console.log(this.$route.query.isRead);
    this.id = this.$route.query.id;
    this.bookTitle = this.$route.query.text;
    // this.showIndex = this.$route.query.index;
    // this.sectionList = this.$route.query.dataList;
  },
  methods: {
    showFun() {
      this.isFun = !this.isFun;
      this.isQH = false;
      this.isTheme = false;
    },
    showMulu() {
      this.isMulu = !this.isMulu;
    },
    btnList(index, link) {
      console.log(index, link);
      this.showIndex = index;
      this.isLoading = true;
      // 章节内容
      this.$axios.get("/chapters/" + encodeURIComponent(link)).then((d) => {
        console.log(d);

        // 赋值
        this.Content = d.data.chapter;
        this.NewcpContent = d.data.chapter.cpContent.split("\r\n");
        // 判断lodaing
        if (this.Content.cpContent == d.data.chapter.cpContent) {
          this.isLoading = false;
        } else {
          this.isLoading = true;
        }
        document.documentElement.scrollTop = 0;
        // console.log(decodeURI(d.data.chapter.cpContent));
      });
      this.btnYuduMulu();
    },
    mohu() {
      this.isMulu = false;
    },
    btnplan() {
      this.isQH = !this.isQH;
      this.isTheme = false;
    },
    btnFor() {
      if (this.showIndex == 0) {
        this.showIndex = 0;
      } else {
        this.showIndex--;
      }
      console.log(this.showIndex);
      this.switchSection(this.showIndex);
      document.documentElement.scrollTop = 0;
    },
    btnAft() {
      if (this.showIndex == this.sectionList.length - 1) {
        this.showIndex = this.sectionList.length - 1;
      } else {
        this.showIndex++;
      }
      console.log(this.showIndex);
      this.switchSection(this.showIndex);
      document.documentElement.scrollTop = 0;
      // console.log(this.sectionList[this.showIndex + 1]);
    },
    switchSection(index) {
      // 先显示
      this.isLoading = true;
      this.showIndex = index;
      this.$axios
        .get("/chapters/" + encodeURIComponent(this.sectionList[index].link))
        .then((d) => {
          this.Content = d.data.chapter;
          this.NewcpContent = d.data.chapter.cpContent.split("\r\n");
          // 判断lodaing
          if (this.Content.cpContent == d.data.chapter.cpContent) {
            this.isLoading = false;
          } else {
            this.isLoading = true;
          }
        });
      this.btnYuduMulu();
    },
    showLoading() {
      if (this.Content.cpContent) {
        this.isLoading = false;
      } else {
        this.isLoading = true;
      }
    },
    btnYuduMulu() {
      let AllId = {
        id: this.id,
        cover: this.$route.query.cover,
        title: this.$route.query.title,
        isRead: "true",
        listIndex: this.showIndex,
        text: this.sectionList[this.showIndex].title,
      };
      let racklist = localStorage.getItem("RackList");
      if (racklist) {
        // console.log(racklist);
        let arr = JSON.parse(racklist);
        // console.log(arr);
        let _this = this;
        // 判断存储内有没有这本书
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id == AllId.id) {
            arr[i].listIndex = this.showIndex;
            arr[i].text = this.sectionList[this.showIndex].title;
            arr[i].isRead = "true";
            localStorage.setItem("RackList", JSON.stringify(arr));
            _this.isAdd = false;
            return false;
          } else {
            console.log("没有这本书");
            _this.isAdd = true;
          }
        }
        // arr.forEach(function (item) {
        //   if (item.id != AllId.id) {
        //     console.log("没有这本书");
        //     _this.isAdd = true;
        //   }
        // });

        if (this.isAdd) {
          arr.push(AllId);
          localStorage.setItem("RackList", JSON.stringify(arr));
        } else {
          localStorage.setItem("RackList", JSON.stringify(arr));
        }
      } else {
        let item = [];
        item.push(AllId);
        localStorage.setItem("RackList", JSON.stringify(item));
      }
    },
    inpchange(e) {
      this.inputValue = e.target.value;

      // 如果value为50是16px
      let mld = 16 / 50;
      // 内容字体大小
      this.fSize = Math.ceil(this.inputValue * mld);

      // 提示章节字体大小
      this.topSize = this.fSize - 4;
      // 标题字体大小
      this.titleSize = this.fSize + 6;
    },
    selTheme(index) {
      console.log(index);
      if (index == 0) {
        this.ColorLeft = 9;
        this.contentBG = "rgb(195, 177, 149)";
        this.ColorIndex = 0;
      } else if (index == 1) {
        this.ColorLeft = 35;
        this.contentBG = "rgb(202, 217, 232)";
        this.ColorIndex = 1;
      } else if (index == 2) {
        this.ColorLeft = 60;
        this.contentBG = "rgb(209, 237, 209)";
        this.ColorIndex = 2;
      } else if (index == 3) {
        this.ColorLeft = 84;
        this.contentBG = "rgb(230, 230, 230)";
        this.ColorIndex = 3;
      }
    },
    btnTheme() {
      this.isTheme = !this.isTheme;
      this.isQH = false;
    },
    btnNight() {
      this.switchImg = !this.switchImg;
      if (this.switchImg) {
        this.imgSrc = require("../assets/bom03.png");
        this.contentMldColor = "rgb(29, 26, 22)";
        this.contentTopColor = "rgb(118, 108, 89)";
        this.selTheme(this.ColorIndex);
      } else {
        this.imgSrc = require("../assets/bom3.png");
        this.contentMldColor = "rgb(141, 141, 141)";
        this.contentTopColor = "rgb(141, 141, 141)";
        this.contentBG = "rgb(26, 26, 26)";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 12vw;
  width: 100%;
  background: rgb(19, 17, 15);
  .back {
    img {
      width: 6vw;
      height: 6vw;
      margin: 3vw 4vw;
    }
  }
}
.addBook {
  position: fixed;
  font-size: 14px;
  top: 16vw;
  right: 0vw;
  height: 10vw;
  line-height: 10vw;
  padding: 0vw 3vw;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #fff;
  background: rgb(19, 17, 15);
}

.btnBot {
  background: rgb(19, 17, 15);
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  .btnList {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .item {
      padding: 1vw 0vw;
      .img {
        width: 6vw;
        height: 6vw;
        margin-left: 1vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        // text-align: center;
        font-size: 14px;
        color: rgb(177, 175, 175);
      }
    }
  }
}

// 主题样式
.theme {
  background: rgb(19, 17, 15);
  color: #fff;
  position: fixed;
  bottom: 13vw;
  left: 0px;
  width: 100%;
  .size {
    display: flex;
    justify-content: space-around;
    padding: 16px 0px;
    .inp {
      /* 滑动条 */
      .range {
        background-color: #e5e5e5;
      }
      input[type="range"] {
        margin-top: 8px;
        outline: none;
        -webkit-appearance: none;
        /*清除系统默认样式*/
        width: 56vw !important;
        // background: -webkit-linear-gradient(#00c3d5, #00c3d5) no-repeat, #ddd;
        // background-size: 0% 30%;
        /*设置左右宽度比例*/
        height: 3px;
        // background: rgb(66, 65, 63);
        /*横条的高度*/
        background: -webkit-linear-gradient(rgb(237, 66, 75), rgb(237, 66, 75))
          no-repeat rgb(66, 65, 63);
        // background-size: 30% 100%; /* 因为周期默认value=0.50正好占50% */
        &::-webkit-slider-thumb {
          /*拖动块的样式*/
          -webkit-appearance: none;
          /*清除系统默认样式*/
          height: 14px;
          /*拖动块高度*/
          width: 14px;
          /*拖动块宽度*/
          background: rgb(237, 66, 75);
          /*拖动块背景*/
          border-radius: 50%;
          /*外观设置为圆形*/
        }
      }
    }
  }
  .themeItem {
    width: 100vw;
    border-top: 2px solid rgb(31, 30, 27);
    padding: 16px 0px;
    border-bottom: 2px solid rgb(31, 30, 27);
    position: relative;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        border-radius: 4px;
        width: 18vw;
        height: 30px;
        list-style: none;
        &:nth-child(1) {
          background: rgb(224, 207, 171);
        }
        &:nth-child(2) {
          background: rgb(202, 217, 232);
        }
        &:nth-child(3) {
          background: rgb(209, 237, 209);
        }
        &:nth-child(4) {
          background: rgb(230, 230, 230);
        }
      }
    }
    img {
      width: 26px;
      height: 20px;
      position: absolute;
      left: 9vw;
      top: 20px;
    }
  }
  .direction {
    display: flex;
    justify-content: space-around;
    padding: 16px 0px;
    div {
      text-align: center;
      padding: 4px 0px;
      width: 40vw;
      border: 1px solid rgb(66, 65, 63);
      color: rgb(66, 65, 63);
      border-radius: 4px;
    }
  }
}

// 目录样式
li.red {
  color: rgb(237, 66, 75) !important;
}
.catalogueMulu {
  width: 100vw;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10;
  .cateleft {
    background-color: rgb(195, 177, 160);
    width: 14vw;
    height: 100vh;
    filter: blur(100px);
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .cateright {
    overflow-y: scroll;
    background: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 86vw;
    height: 100vh;
    .Title {
      .titleName {
        height: 8vw;
        text-align: center;
        font-size: 14px;
        color: rgb(237, 66, 75);
        padding-bottom: 4vw;
        border-bottom: 1px solid rgb(237, 66, 75);
      }
      .numOrder {
        margin: 4vw;
        display: flex;
        justify-content: space-between;
        .num {
          font-size: 15px;
          font-weight: bold;
        }
        .order {
          font-size: 14px;
          color: rgb(51, 55, 61);
        }
      }
      .juan {
        background: rgb(246, 247, 249);
        padding: 4vw 0 2vw 0;
        span {
          font-size: 13px;
          padding-left: 4vw;
          color: rgb(150, 155, 163);
        }
      }
    }
    .section {
      margin: 0vw 4vw 4vw 4vw;
      li {
        padding: 4vw 0vw;
        color: rgb(51, 55, 61);
        border-bottom: 1px solid rgb(244, 245, 246);
        span {
          font-size: 14px;

          &:nth-child(2) {
            padding-left: 2vw;
          }
        }
      }
    }
  }
}

// 上一章和下一章
.plan {
  position: fixed;
  bottom: 13vw;
  left: 0vw;
  height: 20vw;
  width: 100vw;
  background-color: rgb(19, 17, 14);
  .switchover {
    display: flex;
    justify-content: space-around;
    margin-top: 6vw;
    .qian {
      // margin-top: 2vw;
      img {
        width: 5vw;
        height: 5vw;
      }
      span {
        font-size: 14px;
        color: #fff;
        vertical-align: top;
      }
    }
    .middle {
      span {
        font-size: 15px;
        font-weight: bold;
        color: #fff;
      }
    }
    .hou {
      // margin-top: 2vw;
      img {
        width: 5vw;
        height: 5vw;
      }
      span {
        font-size: 14px;
        color: #fff;
        vertical-align: top;
      }
    }
  }
}

// 正文样式
.common {
  background: rgb(195, 177, 149);
  width: 100vw;
  .top {
    font-size: 12px;
    color: rgb(118, 108, 89);
    padding: 4vw;
  }
  .bookCon {
    margin: 4vw 0vw 4vw 0vw;
    .title {
      font-size: 22px;
      color: #1d1a16;
      padding: 0vw 4vw;
    }
    .text {
      color: rgb(30, 27, 23);
      font-size: 16px;
      line-height: 40px;
      p {
        margin: 0px 4vw;
        text-indent: 2em;
      }
    }
  }
}

// 加载样式
.loadingCss {
  position: fixed;
  top: 50%;
  left: 50%;

  #preloader_6 {
    margin: 0 auto;
    position: relative;
    width: 42px;
    height: 42px;
    animation: preloader_6 5s infinite linear;
  }

  #preloader_6 span {
    width: 20px;
    height: 20px;
    position: absolute;
    background: red;
    display: block;
    animation: preloader_6_span 1s infinite linear;
  }

  #preloader_6 span:nth-child(1) {
    background: #2ecc71;
  }

  #preloader_6 span:nth-child(2) {
    left: 22px;
    background: #9b59b6;
    animation-delay: 0.2s;
  }

  #preloader_6 span:nth-child(3) {
    top: 22px;
    background: #3498db;
    animation-delay: 0.4s;
  }

  #preloader_6 span:nth-child(4) {
    top: 22px;
    left: 22px;
    background: #f1c40f;
    animation-delay: 0.6s;
  }

  @keyframes preloader_6 {
    from {
      -ms-transform: rotate(0deg);
    }

    to {
      -ms-transform: rotate(360deg);
    }
  }

  @keyframes preloader_6_span {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(0.5);
    }

    100% {
      transform: scale(1);
    }
  }
}
</style>

